import QtQuick
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import FluentUI

import MyApp

FluChart {
    property var points_data: ([])
    property string title: "Nequist Chart"
    chartType: 'scatter'
    chartData: {
        return {
            "datasets": [{
                    "label": 'Result',
                    "xAxisID": 'x-axis-1',
                    "yAxisID": 'y-axis-1',
                    "borderColor": FluTheme.primaryColor.toString(),
                    "backgroundColor": Qt.rgba(FluTheme.primaryColor.r,
                                               FluTheme.primaryColor.g,
                                               FluTheme.primaryColor.b,
                                               0.1).toString(),
                    "data": points_data
                }]
        }
    }
    chartOptions: {
        return {
            "maintainAspectRatio": false,
            "responsive": true,
            "hoverMode": 'nearest',
            "intersect": true,
            "title": {
                "display": true,
                "text": title,
                "fontSize"// 调整文字大小
                : 16
            },
            "scales": {
                "xAxes": [{
                        "position": 'bottom'
                    }],
                "yAxes": [{
                        "type": 'linear',
                        "display": true,
                        "position": 'left',
                        "id": 'y-axis-1'
                    }]
            }
        }
    }
    Component.onCompleted: {
        // points_data.forEach(function (point) {
        //     console.log("Point Data: ", point.x, point.y, point.label)
        // })
    }
}
